<template>
  <div class="demo-image__placeholder">
        <el-header style="text-align:left;height:30px;">
        <el-container>       

                <el-col>
                <el-image style="height:20px;width:100px;margin:0px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592828196437&di=4c3d6fb1f8a988ac9f8c3f03e788236c&imgtype=0&src=http%3A%2F%2Fwww.mandaringarden.com.cn%2Fpublic%2Fuploads%2F2015%2F05%2F2015052806023413.jpg"/>
                </el-col>
                 <el-col style="margin-right:1100px">
                     <el-row>
                    <span class="my-span">{{this.courseID.courseName}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="my-span">{{this.courseID.courseType}}</span>
                    </el-row>
                    <span style="color: rgb(153, 153, 153);font-size:10px">开课人：{{this.courseID.teacher}}</span>
                </el-col>
         
        </el-container>       
        </el-header>
        <el-container style="height: 100vh; border: 1px solid #eee;margin-top:10px">
    <el-aside width="150px" style="background-color: rgb(238, 241, 246)">
         <el-menu router :default-openeds="['1','2']">
            <el-menu-item ><img :src="this.courseID.avatarUrl" style="width:100px;height:40px"/></el-menu-item>
            <el-menu-item index="/study/work/" class="el-icon-message-solid">课程学习</el-menu-item>
            <el-menu-item index="/study/discuss" class="el-icon-menu">讨论区</el-menu-item><br>
            <el-menu-item index="/study/homework" class="el-icon-message-solid">作业</el-menu-item><br>
            <el-menu-item index="/study/grade" class="el-icon-s-tools">成绩分析</el-menu-item>
        </el-menu> 
    </el-aside>
    
    <el-container>        
        <el-main style="margin:0px">
          <router-view></router-view>
            <!--查询界面-->

        </el-main>
    </el-container>
    </el-container>
  
  </div>
</template>

<script>

//import PageTable from '@/components/common/PageTable'
//import {page,updateUseful} from '@/api/modules/book'
//import Edit from './edit'
import {getCookie} from '@/libs/cookie'
import {selectclass} from '@/api/modules/create_class'

export default {
    name: 'book',
   // components:{PageTable,Edit},
   data() {
      return {
        username:'',
         courseID:{
            id:''
        }
      };
    },
    mounted(){
      let user = JSON.parse(getCookie("user") || '{}');
      this.username = user.nickname
      let courseID = JSON.parse(getCookie("courseID") || '{}');
      this.courseID.id = courseID
      this.findCourse()
    },

    methods:{
        findCourse(filter){
            filter = {
                ...filter,
                ...this.courseID
            }
        selectclass(filter).then(res =>{
             this.courseID = res.data
             console.log(res.data)
          })
        }

  }
  
};
</script>

<style scoped>
  html,body{
    padding: 0%;
    margin: 0;
  }
  .el-header {
    background-color: rgb(255, 254, 254);
    line-height: 20px;
  }
  
  .el-aside {
    color: #333;

  }

  .el-main {
    color: #333;

  }

  .my-span {
      font-size: 12px;
      
       color: rgb(71, 70, 70);
  }

</style>